@progress/kendo-theme-default

What is @progress/kendo-theme-default?

@progress/kendo-theme-default is a theme package for Kendo UI components. It provides a default styling theme that can be applied to Kendo UI widgets to ensure a consistent and visually appealing design across your application.

What are @progress/kendo-theme-default's main functionalities?

Applying Default Theme to Kendo UI Components

This code imports the default theme CSS file, which applies the default Kendo UI styling to all Kendo UI components in your application.

import '@progress/kendo-theme-default/dist/all.css';

Customizing Theme Variables

This code demonstrates how to customize the default theme by overriding SCSS variables. You can change the primary and secondary colors and then apply the custom theme using the `kendo-theme` mixin.

/* Import the default theme */
@import "~@progress/kendo-theme-default/scss/all";

/* Override variables */
$primary: #ff0000;
$secondary: #00ff00;

/* Apply the custom theme */
@include kendo-theme();

Using Theme with Angular

This code shows how to use the default theme in an Angular application. It imports the theme CSS and applies it to a Kendo UI button component.

import { Component } from '@angular/core';
import '@progress/kendo-theme-default/dist/all.css';

@Component({
  selector: 'my-app',
  template: `<kendo-button>My Kendo Button</kendo-button>`
})
export class AppComponent {}

Other packages similar to @progress/kendo-theme-default

bootstrap

Bootstrap is a popular CSS framework that provides a wide range of pre-styled components and utilities. Unlike @progress/kendo-theme-default, which is specifically designed for Kendo UI components, Bootstrap can be used with any HTML elements and offers a more general-purpose solution.

material-ui

Material-UI is a React component library that implements Google's Material Design. It provides a set of pre-styled components similar to Kendo UI but is specifically tailored for React applications. Material-UI offers a different design aesthetic compared to the default Kendo theme.

ant-design

Ant Design is a comprehensive design system and React UI library. It offers a wide range of components and themes, similar to Kendo UI, but is focused on providing a consistent design language for enterprise applications. Ant Design provides more customization options and a different design philosophy compared to the default Kendo theme.

README

Kendo UI Default Theme

The Kendo UI Default Theme is a SCSS-based theme for the Kendo UI components.

• License
• Basic Usage
• Customization
• Development
  • Embedding Resources
  • Documenting Variables

License

This package is part of the following suites:

• Kendo UI for Angular
• KendoReact
• Kendo UI for jQuery
• UI for ASP.NET MVC
• UI for ASP.NET Core

All available Kendo UI commercial licenses may be obtained at http://www.telerik.com/purchase/kendo-ui.

If you do not own a commercial license, the usage of this software shall be governed by the Apache License, Version 2.0.

Basic Usage

For more information on how to implement the Default theme in your project, refer to the following articles:

• Using the Default Theme in Angular Projects
• Using the Default Theme in React Projects
• Using the Default Theme in jQuery Projects

Customization

To customize the Default Theme in one swoop, use the colors which are defined in the scss/_variables.scss file. Any change you make to the content of this file is propagated to every component.

To style a specific component, apply the variables which are used in its specific .scss file.

After you build the theme by running the npm run build command, the complete theme that you can use in your project will be available in the dist/all.css file.

Development

The styles are split into components and the dependencies are managed by the import-once mixin. When you configure the styles, define them within an import-once block. In this way, when required from multiple files, they are bundled once.

During development, the SCSS files are linted on every commit and built on every push command. To test the theme package against a component, link the theme in the components package.

Browser-specific properties are generated at build-time through the PostCSS autoprefixer.

Embedding Resources

The embedding of resources, such as images or fonts, avoids hosting-related issues when your project consumes the theme. For more details, refer to issue #41.

To update the embedded resources in your project:

1. Run the npm run embed-assets task. As a result, the task generates a file with the same name, which registers a Base64-encoded version in the $data-uris SCSS map. For example, the foo.woff font file will receive a foo.scss file, which can later be imported through @import './font/foo';.
2. Inline the Base64 version through map-get( $data-uris, 'WebComponentsIcons.woff' ).

Documenting Variables

The available variables for customizing the Default theme are listed in the article on Default variables. The file is generated from the SCSS source files by running the npm run api command.

To document a variable, use triple-slash comments (///) before its definition.

/// Variable description
$foo: 42 !default;

To group variables, use the @group directive.

/// Variable description
/// @group random
$foo: 42 !default;

/// Another variable description
/// @group random
$bar: 1024 !default;

To change the layout or the front meter of the generated help topic, change the build/customization.md.hbs source file.

Copyright © 2019 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.